<template>
  <div class="app-container  bg-gray">
    <el-card class="box-1">
      <div slot="header"><span>编辑申请</span></div>
      <el-form ref="form" :model="form" label-width="160px">
        <el-form-item label="说明标题">
          <el-input v-model="form.title"/>
        </el-form-item>
        <el-form-item label="申请内容说明">
          <el-input v-model="form.brief"/>
        </el-form-item>
        <el-form-item label="结束内容说明">
          <el-input v-model="form.endLanguage"/>
        </el-form-item>
        <el-form-item label="申请表单">
          <el-select v-model="form.formId" placeholder="请选择申请表单">
            <el-option v-for="item in formList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="有效时间">
          <el-date-picker
            v-model="form.date"
            class="picker"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"/>
        </el-form-item>
        <el-form-item label="最多申请人数">
          <el-input-number v-model="form['maxPeopleNum']"/>
        </el-form-item>
        <el-form-item label="每人最多数量">
          <el-input-number v-model="form['eachPeopleNum']"/>
        </el-form-item>
        <el-form-item label="每天可申请次数">
          <el-input-number v-model="form['dayCount']"/>
        </el-form-item>
        <el-form-item label="每周可申请次数">
          <el-input-number v-model="form['weekCount']"/>
        </el-form-item>
        <el-form-item label="每月可申请次数">
          <el-input-number v-model="form['monthCount']"/>
        </el-form-item>
        <div style="text-align:center">
          <el-button type="primary" style="width: 120px;" @click="submitForm('form')">保 存</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        formList: [],
        form: {}
      }
    },
    watch: {
    },
    created() {
      this.form.id = this.$route.query.id;
      this.getAllFormList();
    },
    methods: {
      getAllFormList() {
        const url = 'form/getAll';
        this.$store.dispatch('GetConnect', { url }).then(res => {
          this.formList = res.data;
          this.getFormInfo();
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      },
      getFormInfo() {
        const url = 'apply/getInfo';
        const data = { id: this.form.id };
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.form = res.data;
          this.form.status = !!this.form.status;
          this.form.date = [this.form.startTime, this.form.endTime];
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员');
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const data = this.form;
            data.date.length !== 0 && (data.startTime = data.date[0], data.endTime = data.date[1]);
            data.status = data.status ? 1 : 0;
            const url = 'apply/edit';
            this.$store.dispatch('GetConnect', { url, data }).then(res => {
              this.$message.success(res.msg);
              this.$router.back(-1);
            }).catch((e) => {
              this.$message.error(e.msg);
            })
          } else {
            this.$message.error('提交失败,请检查必填项');
          }
        })
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../styles/index.scss';
  .box-1 {
    width: 1000px;
    margin: 0 auto;
    .el-form {
      max-width: 900px;
    }
  }
</style>
